<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="0" :border-bottom="false"></u-navbar>

		<view class="content_box u-skeleton" style="margin-top: 150rpx;">
			<view class="content-item">
				<view class="userinfo flex justify-between align-center">
					<view @click="l.to('/pages/personal/personalInfo')" class="flex align-center">
						<view class="user-avatar u-skeleton-circle">
							<image class="img" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png" mode="aspectFill"></image>
						</view>
						<view class="user-name">					
							<view class="flex align-center">
								<text class="f34 u-skeleton-fillet">玛卡巴卡</text>
								<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_next.png" style="width: 9rpx;height: 17rpx;margin-left:20rpx ;"></image>
							</view>
							<view class="f28 tipc-tel margin-top-xs u-skeleton-fillet">189****2305</view>
						</view>
					</view>
					<view class="publishCse flex align-center u-skeleton-fillet" @click="show_mask_case = true">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fbal.png" style="width: 40rpx;height: 40rpx;"></image>
						<text style="color: #a0683f;" class="f26 margin-left-sm">发布案例</text>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="inactive-bj flex align-center justify-between bg-img u-skeleton-fillet">
					<view class="flex flex-direction">
						<view class="inviteFriends-text flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yqhy.png" style="width: 25rpx;height: 27rpx;"></image>
							<text class="f22 text-white margin-left-xs">邀请好友</text>
						</view>
						<view class="f22 text-white" style="margin-top: 24rpx;">邀请好友解锁各种权益</view>
					</view>
					<view class="inviteNow-btn" @click="inviteFriends">立即邀请</view>
				</view>
			</view>
			<view class="content-item content-border">
				<view class="myServ">
					<view class="title f-30 u-skeleton-fillet">我的服务</view>
					<view class="app-list flex justify-between flex-wrap">
						<view @click="l.to('/pages/personal/my_appointment')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_wdyy.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">我的预约</view>
						</view>
						<view @click="l.to('/pages/personal/myPurse')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_wdqb.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">我的钱包</view>
						</view>
						<view @click="l.to('/pages/personal/a_repair_report')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yjbx.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">一键保修</view>
						</view>
						<view @click="l.to('/pages/iWantToDecorate/decoration_list')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_zxqd.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">装修清单</view>
						</view>
						<view @click="l.to('/pages/myCustServ/myCustServ')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_wdkf.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">我的客服</view>
						</view>
						<view @click="l.to('/pages/sysInfo/sysInfo')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_xtxx.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">系统消息</view>
						</view>
						<view @click="l.to('/pages/building_materials/building_materials')" class="app-litem">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_jrjc.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">加入建材</view>
						</view>
						<view class="app-litem" @click="identity">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_sfsq.png" class="img u-skeleton-fillet"></image>
							<view class="u-skeleton-fillet">身份申请</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="like-case">
					<view class="title f30 flex justify-between align-center">
						<text class="f30 u-skeleton-fillet">我喜欢的案例</text>
						<view @click="l.to('/pages/personal/case_like')" class="flex align-center u-skeleton-fillet">
							<text class="f26" style="color: #999999;">查看全部</text>
							<u-icon size="22" name="arrow-right" color="#999999" style="margin-left: 8rpx;"></u-icon>
						</view>
					</view>
					<view class="decoration-hall-list">
						<view class="item" v-for="(item, index) in decoration_list"  :key="index">
							<view class="item-img u-skeleton-fillet" @click="decorationBind"><image :src="item.img" class="img"></image></view>
							<view class="hidden u-skeleton-fillet">{{ item.title }}</view>
							<view class="tips-cont hidden u-skeleton-fillet">{{ item.tips }}</view>
							<view class="text-bot-cont flex justify-between">
								<view class="user-detail flex align-center">
									<view class="cu-avatar"><image :src="item.avatar" class="img u-skeleton-fillet"></image></view>
									<text class="username hidden u-skeleton-fillet">{{ item.username }}</text>
								</view>
								<view class="flex align-center u-skeleton-fillet" @click="Collection(index)">
									<i :class="item.iscollect ? 'cuIcon-likefill' : 'cuIcon-like'"></i>
									<text class="sc-text">{{ item.collectNum }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 上传案例弹窗 -->
			<u-mask :show="show_mask_case">
				<view class="warp">
					<view class="mask-content bg-img">
						<view class="mask-box">
							<view class="text-them text-center">发布案例需要上传住房合同，平台审核通过后即可发布，是否现在去上传？</view>
							<view class="btn-box">
								<navigator url="./uploadContract" hover-class="none" class="mask-btn" @click="show_mask_case = false">立即上传</navigator>
							</view>
						</view>
					</view>
					<u-icon name="close-circle" color="#ffffff" size="50" @click="show_mask_case = false" class="icon-btn"></u-icon>
				</view>
			</u-mask>
			<!-- 邀请好友弹窗 -->
			<u-mask :show="show_mask_yqhy">
				<view class="warp">
					<view class="mask-content yqhy-content">
						<view class="mask-box">
							<view class="text-them text-center">暂时无任何权限，请去我的-身份申请，进行身份认证</view>
							<view class="btn-box">
								<view class="mask-btn" @click="show_mask_yqhy = false">我知道啦</view>
							</view>
						</view>
					</view>
					<u-icon name="close-circle" color="#ffffff" size="50" @click="show_mask_yqhy = false" class="icon-btn"></u-icon>
				</view>
			</u-mask>
		</view>
		
		<!--骨架组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading:true,
			decoration_list: [
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect:true,
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect:true,
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect:true,
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',	
					iscollect:true,
				},
			],
			show_mask_case:false,
			show_mask_yqhy:false,
		};
	},
	onShow() {},
	onLoad(e) {
		// 通过延时模拟向后端请求数据，调隐藏骨架屏
		setTimeout(() => {
			this.loading = false;
		}, 2000)
	},
	mounted() {},
	methods: {
		Collection(index) {
			this.decoration_list[index].iscollect = !this.decoration_list[index].iscollect;
			this.decoration_list[index].iscollect
				? (this.decoration_list[index].collectNum += 1)
				: (this.decoration_list[index].collectNum -= 1);
		},
		inviteFriends(){
			// 没有身份时弹窗提示
			//this.show_mask_yqhy = true
			
			// 身份认证后直接跳转到邀请好友界面
			uni.navigateTo({
				url:'../Invite_friends/Invite_friends'
			})
		},
		identity(){			
			// 没有身份时跳转
			uni.navigateTo({
				url:'Identity_application'
			})
			// 当有身份时一个身份时跳转
			// let identity = 1
			// uni.navigateTo({
			// 	url:'Identity_application_bf?identity=' + identity
			// })
		},
		decorationBind(){
			uni.navigateTo({
				url:'../decoration_hall/case_details'
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.content-border{
		border-bottom: 20rpx solid #F7F7F7;
		overflow: hidden;
	}
	.userinfo{
		.user-avatar{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.user-name{
			margin-left: 20rpx;
			.tipc-tel{
				color: #717171;
			}
		}
		.publishCse{
			margin-right: -22rpx;
			background: #ffd4b5;
			border-radius: 30rpx 0px 0px 30rpx;
			height: 60rpx;
			padding: 10rpx 38rpx 10rpx 14rpx ;
		}		
	}
	.inactive-bj{
		border-radius: 20rpx;
		padding: 47rpx 20rpx 20rpx 48rpx;
		position: relative;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617152029.png) ;
		
		.inviteNow-btn{
			background: linear-gradient(207deg,#ffe9c5 0%, #ffd7ac 100%);
			border-radius: 10px;
			color: #393b56;
			font-size: 24rpx;
			padding: 10rpx 28rpx;
			margin-top: -20rpx;
		}
	}
	.myServ{
		.app-list{
			margin-top: 44rpx;
			.app-litem{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 46rpx;
				.img{
					width: 80rpx;
					height: 80rpx;
				}
				view{
					font-size: 24rpx;
					margin-top: 10rpx;
					text-align: center;
				}
			}
		}
	}
	.like-case{
		padding-top: 14rpx;
		.decoration-hall-list {
		padding: 20px 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		}
		.item {
			width: 48%;
			margin-bottom: 38rpx;
			.item-img {
				height: 240rpx;
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tips-cont {
				margin-top: 18rpx;
				color: #ffb81e;
				font-size: 24rpx;
			}
			.text-bot-cont {
				.user-detail {
					width: 65%;
				}
				.cu-avatar {
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 50%;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.username {
					font-size: 24rpx;
					color: #999999;
					margin-left: 9rpx;
					width: 80%;
				}
				.sc-text {
					margin-left: 10rpx;
					font-size: 24rpx;
				}
				margin-top: 19rpx;
				.cuIcon-likefill {
					color: red;
				}
			}
		}
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		.mask-content{
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
			background-size: 100%;
			width: 85%;
			min-height: 700rpx;
			.mask-box{
				position: relative;
				top: 340rpx;
				padding: 30rpx;
				.text-them{
					color: #7c633f;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					line-height: 50rpx;
				}
				.btn-box{
					margin-top: 60rpx;
					text-align: center;
					.mask-btn{
						background: #ec7066;
						border-radius: 40rpx;
						padding: 20rpx 86rpx;
						color: white;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}				
			}
		}
		.yqhy-content{
			background: #FDF5E2;
			border-radius: 20rpx;
			width: 75%;
			min-height: auto;
			.mask-box{
				top: 0;
				padding: 70rpx 40rpx 50rpx;
			}
		}
		.icon-btn{
			margin-top: 50rpx;
		}
	}
}
</style>
